<template>
  <div class="common-layout">
    <el-config-provider :locale="locale" :size="fontsize">
      <el-container class="container">
        <el-aside width="auto">
          <!-- 树形菜单组件 -->
          <TreeMenu :is-collapse="isCollapse" />
        </el-aside>
        <el-container>

          <el-header class="header">
              <!-- 工具栏 -->
              <el-row>
                <el-col :span="12">
                  <HeaderBreadcrumb @change-collapse="isCollapse = $event" />
                </el-col>
                <!-- 功能区 -->
                <el-col :span="12" class="ribbon">
                  <el-space :size="size" :spacer="spacer">
                    <Screenfull />
                    <Fontsize @change-Size="changeSize" />
                    <!-- <Language @change-language="local = $event" /> -->
                    <Language @change-language="changeLanguage" />
                    
                    <UserHeader />
                  </el-space>
                </el-col>

              </el-row>
              <!-- 标签页组件 -->
              <HeaderTags />
          </el-header>

          <el-main class="main">
            <!-- 内容部分 -->
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </el-config-provider>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import TreeMenu from '@/components/navigation/TreeMenu.vue'
import HeaderTags from '@/components/navigation/HeaderTags.vue'
import HeaderBreadcrumb from '@/components/navigation/HeaderBreadcrumb.vue'
import Screenfull from '@/components/screenfull/Screenfull.vue'
import Language from '@/components/languages/Language.vue';
import UserHeader from '@/components/userHeader/UserHeader.vue';
import Fontsize from '@/components/changeFontSize/FontSize.vue';
import { h } from 'vue'
import { ElDivider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'

const size = ref(10)
const spacer = h(ElDivider, { direction: 'vertical' })

// 当前语言环境
let local = ref(localStorage.getItem('language') ||"zh")
 
// 计算属性：当前语言
const locale = computed(() => {
  if ("zh" === local.value) {
    return zhCn;
  }
  return en;
})

// 菜单是否折叠
let isCollapse = ref(false)

// 设置默认大小(本地储存有值就从本地储存获取，没有就是默认)
let fontsize = ref(localStorage.getItem('fontsize') || 'default');

/**
 * 设置组件大小
 * @param data 大小值
 */
const changeSize = (data: string): void => {
  fontsize.value = data;
}

/**
 * 设置组件语言
 * @param data 语言
 */
const changeLanguage = (data: string): void => {
  local.value = data;
}
</script>

<style lang="less">
.el-scrollbar__view,
.container,
.common-layout {
  height: 100%;
}

.el-header {
  height: auto;
}

.ribbon .el-button {
  border: none;
}

.ribbon .el-space {
  display: flex;
  // flex-direction: row-reverse;
}

.ribbon {
  display: flex;
  flex-direction: row-reverse;
}
</style>


